import { RouterProvider } from "react-router-dom"
import { createBrowserRouter } from "react-router-dom"
import RouteAuth from 'components/RouteAuth'
import { lazy, useMemo } from "react"
import { useSelectRouter } from '@/store/hooks'
const Layout = lazy(() => import("components/Layout"))
const Login = lazy(() => import("@/pages/Login"))
const NotFound = lazy(() => import("@/pages/404"))

const RouteProvider = ({ children }) => {
  const routess = useSelectRouter()
  console.log(routess)
  const allRoutes = useMemo(() => [
    {
      id: 'root',
      path: "/conf/*",
      element: <RouteAuth><Layout /></RouteAuth>,
      children: [
        [...routess],
      ]
    },
    {
      path: "/Login",
      element: <Login />
    },
    {
      path: "/*",
      element: <NotFound />
    }
  ], [routess])
  const router = useMemo(() => createBrowserRouter(allRoutes), [allRoutes])
  return <RouterProvider router={router} fallbackElement={<p>Initial Load...</p>}>
    {children}
  </RouterProvider>
}

export default RouteProvider